<template>
    <div class="warp v-player">
        <van-nav-bar :title="title" :fixed="true">
            <i class="iconfont ireturn" slot="left" @click="back"></i>
        </van-nav-bar>
        <div class="v-body">
            <div id="video" style="width: 100%; height: 300px;"></div>
        </div>
        <div class="v-detail">
            <div   class="v-play-pop">
          <h2>播放列表</h2>
          <van-tabs v-model="playTabActive" swipeable>
            <van-tab v-for="(item, key) in playData" :title="key+(key.indexOf('m3u8') > 0?' 推荐':'')">
              <van-row>
                <van-col :span="p.num.length>2?'6':'4'" v-for="p in item" class="v-play-item">
                    <span @click="play(p,key)">{{p.num}}</span>
                </van-col>
              </van-row>
            </van-tab>
          </van-tabs>
          </div>
        </div>   
    </div>
</template>
<script>
import "dplayer/dist/DPlayer.min.css";
import DPlayer from "dplayer";
export default {
  name: "player",
  data() {
    return {
      vid: 0,
      vData:{},
      playData: [],
      title: "",
      playUrl: "",
      playTabActive: 0,
      dp:{}
    };
  },
  methods: {
    back() {
      this.$back();
    },
    loadDetail() {
      let that = this;
      that.$ajax.post(that.$api.detail + that.vid, {}, successRes => {
          that.vData = successRes.data.vData;
          that.playData = successRes.data.playData;
      });
      that.vHistory = localStorage.getItem(that.vid) || 0;
    },
    play(item,key) {
      this.title = this.vData.vname + " " + item.num;
      this.dp.switchVideo({url:item.url,type: 'auto',});
      this.dp.play();
    }
  },
  mounted() {
    this.vid = this.$route.query.vid;
    this.playUrl = this.$route.query.playUrl;
    this.title = this.$route.query.title;
    let that = this;
    that.dp = new DPlayer({
      container: document.getElementById("video"),
      autoplay:true,
      theme:'#FADFA3',
      screenshot: true,
      video: {
        url: that.playUrl,
        type: "auto"
      }
    });
    this.loadDetail();
  }
};
</script>
<style lang="less" scoped>
</style>

